<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const map = ref([]);
const links = ref<string[]>([]);
let myChart: echarts.ECharts | null = null;

const initParamsCity = async (adcode: string) => {
  const { data } = await axios.get(
    `https://geo.datav.aliyun.com/areas_v3/bound/${adcode}_full.json`
  )
  if(!data) return
  echarts.registerMap("mapJson", { geoJSON: data });

  if (myChart) myChart.dispose();
  myChart = echarts.init(map.value);

  myChart.setOption({
    geo: {
      map: "mapJson",
      // 是否开启鼠标缩放和平移漫游
      roam: true,
      //当前视角缩放比例
      zoom: 1,
      //滚轮缩放的极限控制
      scaleLimit: {
        min: 1, //最小1倍
        max: 3, //最大3倍
      },
      label: {
        show: true,
        color: "#666666",
      },
      // 地图区域的多边形 图形样式。
      itemStyle: {
        // 地图区域的颜色
        areaColor: "#71d5a1", // 绿色
        // 图形的描边颜色
        borderColor: "#2979ff", // 蓝色
      },
      // 设置高亮状态下的多边形和标签样式
      emphasis: {
        // 设置区域样式
        itemStyle: {
          areaColor: "#ffff99", // 黄色
          borderColor: "#f29100", // 描边颜色黄色
        },
        // 设置字体
        label: {
          fontSize: 16, // 16px
          color: "#f29100", // 白色
        },
      },
    },
    //提示框组件
    tooltip: {},
    // series: {
    //   type: "map",
    //   map: "mapJson",
    //   label: { show: true },
    //   roam: true,
    //   zoom: 1,
    // },
    //视觉映射组件(左下角)
    visualMap: {
      show: true,
      right: 26,
      top: 40,
      showLabel: true,
      // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
      calculable: false,
      // 拖拽时，是否实时更新
      realtime: true,
      align: "left",
      //各颜色代表的区域
      pieces: [
        {
          gte: 100,
          label: "> 100",
          color: "#FDB669",
        },
        {
          gte: 50,
          lt: 99,
          label: "50 - 99",
          color: "#FECA7B",
        },
        {
          gte: 30,
          lt: 49,
          label: "30 - 49",
          color: "#FEE191",
        },
        {
          gte: 10,
          lt: 29,
          label: "10 - 29",
          color: "#FFF0A8",
        },
        {
          lt: 9,
          label: "< 10",
          color: "#FFFFBF",
        },
      ],
    },
  });

  myChart.on("click", (params) => {
    getAdocode(data, params.name) && links.value.push(getAdocode(data, params.name));
  });
};
//  @typescript-eslint/no-explicit-any
const getAdocode = (list: any, name: string) => {
  return list.features.find((i: any) => i.properties.name === name).properties
    .adcode;
};

const toback = () => {
  if (links.value.length === 1) return;
  links.value.pop();
};

onMounted(() => {
  links.value.push("100000");
});

watch(
  links,
  (val) => {
    if (!val.length) return;
    initParamsCity(val[val.length - 1]);
  },
  { immediate: true, deep: true }
);

onBeforeUnmount(() => {
  if (myChart) myChart.dispose();
});
</script>

<template>
  <button style="margin-top: 38px;" @click="toback">返回上一级</button>
  <div style="width: 100%; height: 100vh;overflow:hidden;" ref="map"></div>
</template>

<style scoped lang="scss">
body{
  margin: 0;
}
</style>
